<template>
  <el-dialog v-model="dialogVisible" width="700px">
    <Title title="学生个人信息" />
    <div class="dialog-container">
      <div v-if="studentInfo" class="student-detail">
        <!-- 基本信息 -->
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学号" label-class-name="detail-label">
            {{ studentInfo.stuId || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="姓名" label-class-name="detail-label">
            {{ studentInfo.user?.nickName || studentInfo.userName || '-' }}
          </el-descriptions-item>

          <el-descriptions-item label="联系电话" label-class-name="detail-label">
            {{ studentInfo.user?.phonenumber || studentInfo.phonenumber || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱" label-class-name="detail-label" :span="2">
            {{ studentInfo.email || studentInfo.user?.email || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="所属学院" label-class-name="detail-label">
            {{ studentInfo.user?.dept?.deptName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="专业" label-class-name="detail-label">
            {{ studentInfo.major?.majorName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="年级" label-class-name="detail-label">
            {{ studentInfo.grade?.gradeName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="组队状态" label-class-name="detail-label">
            <el-tag :type="studentInfo.studentTeam !== null ? 'success' : 'info'" size="small">
              {{ studentInfo.studentTeam == null ? '未组队' : '已组队' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 个人简介 -->
        <div class="info-section">
          <div class="section-title">
            <el-icon><Document /></el-icon>
            <span>个人简介</span>
          </div>
          <div class="section-content">
            {{ studentInfo.summary || '暂无个人简介' }}
          </div>
        </div>

        <!-- 已组队信息 -->
        <div v-if="studentInfo.studentTeam" class="info-section team-info">
          <div class="section-title">
            <el-icon><UserFilled /></el-icon>
            <span>当前队伍信息</span>
          </div>
          <el-descriptions :column="1" border class="team-descriptions">
            <el-descriptions-item label="毕设名称" label-class-name="detail-label">
              {{ studentInfo.studentTeam.team.teamName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="队伍角色" label-class-name="detail-label">
              <el-tag :type="studentInfo.studentTeam.isLeader === '1' ? 'warning' : 'info'" size="small">
                {{ studentInfo.studentTeam.isLeader === '1' ? '队长' : '队员' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div v-else class="loading-container">
        <el-empty description="加载中..." />
      </div>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { Document, Star, Briefcase, TrendCharts, UserFilled } from '@element-plus/icons-vue'
import Title from '@/components/Title/index.vue'
const dialogVisible = ref(false)
const studentInfo = ref(null)

// 打开弹窗
const openDialog = (student) => {
  studentInfo.value = student
  dialogVisible.value = true
}

// 关闭弹窗
const close = () => {
  dialogVisible.value = false
  // 延迟清空数据，避免关闭动画时闪烁
  setTimeout(() => {
    studentInfo.value = null
  }, 300)
}

defineExpose({ openDialog })
</script>

<style scoped>
.student-detail {
  padding: 10px 0;
}

:deep(.detail-label) {
  font-weight: 600;
  background-color: #f5f7fa;
}

.info-section {
  margin-top: 20px;
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-color-primary);
}

.section-title .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.section-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.team-info {
  background-color: #fff7e6;
  border-color: #ffd666;
}

.team-info .section-title {
  border-bottom-color: #ffa940;
}

.team-info .section-title .el-icon {
  color: #ffa940;
}

.team-descriptions {
  margin-top: 8px;
}

.loading-container {
  padding: 40px 0;
  text-align: center;
}

/* 优化描述列表样式 */
:deep(.el-descriptions__body) {
  background-color: white;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style>
